import React, { createContext, useContext } from "react";

const nameContent = createContext();
const nickContent = createContext();

const Child2 = () => {
  // useContext可以接收一个context对象，返回它对应的Provider的value
  const { name } = useContext(nameContent);
  const { nick } = useContext(nickContent);
  return (
    <span>
      child2 - {name} - {nick}
    </span>
    // <>
    //   <nameContent.Consumer>
    //     {(value) => {
    //       return (
    //         <nickContent.Consumer>
    //           {(value2) => {
    //             return (
    //               <span>
    //                 child2 - {value.name} - {value2.nick}
    //               </span>
    //             );
    //           }}
    //         </nickContent.Consumer>
    //       );
    //     }}
    //   </nameContent.Consumer>
    // </>
  );
};

const Child = () => {
  return (
    <nickContent.Provider
      value={{
        nick: "xiaosan",
      }}
    >
      <div>child</div>
      <Child2 />
    </nickContent.Provider>
  );
};

const App = () => {
  return (
    <nameContent.Provider
      value={{
        name: "zhangsan",
      }}
    >
      <h3>useContext</h3>
      <Child />
    </nameContent.Provider>
  );
};

export default App;
